<template>
	<view class="page page-mall-detail">
		<view class="swiper-wrap">
			<swiper style="height: 100%;" circular :indicator-dots="true" :autoplay="true">
				<swiper-item v-for="(v,k) in info.images" :key="k">
					<image class="h-full w-full" :src="v" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view text-lg fw-600 p-2>{{ info.name }}</view>
		<view c-red-7 text-base pl-2>￥{{ info.price || '可议价' }}</view>
		<view text-base px-2 pb-1>{{ info.description }}</view>

		<divider height="5px"></divider>

		<view text-lg fw-600 p-2>产品详情</view>

		<view p-2 v-html="info.content"></view>
		
		<template v-for="item in info.extend_attr">
			<divider height="5px"></divider>
			<view text-lg fw-600 p-2>{{item.name}}</view>
			<view p-2>{{ item.value }}</view>
		</template>

		<view class="bottoms">
			<view text-center w-3sl_20 @click="goStore">
				<view class="icon icon-home text-2xl"></view>
				<view>主页</view>
			</view>
			<view text-center w-3sl_20 @click="collectFn">
				<view class="icon text-2xl" :class="collected ? 'icon-collect-filled c-red-5' : 'icon-collect'"></view>
				<view>收藏</view>
			</view>

			<view class="btns">
				<view class="left" @click="doConsult">咨询客服</view>
				<view class="right" @click="askPrice">立即询价</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'
	import { consult } from '@/common/utils'
	import { onLoad } from "@dcloudio/uni-app";

	const {id} = defineProps({
		id: String
	})

	const info = ref({})
	const collected = ref(false)
	async function getInfo() {
		const res = await api.goodsDetail({ goods_id: id })
		collected.value = res.collect
		info.value = res
	}
	getInfo()

	const askPrice = () => {
		uni.navigateTo({
			url: `/pages/askprice/index?id=${id}`
		})
	}
	
	const goStore = () => {
		uni.navigateTo({
			url: `/pages/store/detail?id=${info.value.shop_id}`
		})
	}

	const doConsult = () => {
		consult({ 
			source: 'goods',
			id: info.value.goods_id,
		})
	}

	const collectFn = async () => {
		let res = await api.collect({
			source_id: id,
			type: 'goods'
		})
		if(res) {
			collected.value = !collected.value
		}
	}
</script>

<style lang="scss">
.page-mall-detail {
	
	.swiper-wrap {
		aspect-ratio: 3/4;
	}

	.bottoms {
		position: fixed;
		width: 100%;
		padding: 0 2%;
		height: 120upx;
		left: 0;
		bottom: 0;
		z-index: 9;
		background: white;
		box-shadow: 0 0 4px 0 grey;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		.btns {
			margin-left: 3%;
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36upx;
			color: white;
		}
		.left {
			width: 40%;
			background-color: $uni-color-navigator;
			border-radius: 100px 0 0 100px;
			padding: 10px 0;
			text-align: center;
		}
		.right {
			width: 60%;
			background-color: orangered;
			border-radius:  0 100px 100px 0 ;
			padding: 10px 0;
			text-align: center;
		}
	}
}

</style>

